<template>
	<div>
		<div class="sign" 
				:class="selected ? 'selected' : '' "
				@click.capture.stop="toggleOpen($event, data)"
				@mouseover.capture.stop="handleMouseEvt($event, data, 'over')" 
				@mouseout.capture.stop="handleMouseEvt($event, data, 'out')">
			<div class="content" :style="contentStyle">
				<span class="icon" :class="signCls"></span>
				<span class="tagname">{{data.name + (3 == data.type ? (': ' + data.value) : '')}}</span>
			</div>
		</div>
		<div class="children"
				v-if="data.childNodes.length > 0"
				v-show="data.childOpen">
			<TreeNode v-for="(item, posi) in data.childNodes" :key="item.id"
					:node="item">
			</TreeNode>			
		</div>
	</div>	
</template>
<script>
	import Service from '../../../../service/index.js';
	export default {
		name: 'TreeNode',
		props: {
			node: {
				type: Object,
				default: function(){
					return {};
				}
			}
		
		},

		data: function(){
			let self = this;
			let dataProp = self.node;
			return {
				data: {
					id: dataProp.id,
					pid: dataProp.pid,
					type: dataProp.type,
					name: dataProp.name,
					value: dataProp.value,
					level: dataProp.level,
					childNodes: dataProp.childNodes,
					childOpen: dataProp.childOpen,
				},
				selected: false,
			};

		},
		
		watch: {
			node: {
				deep: true,
				handler: function(newVal, oldValue){
					this.data = newVal;
				}

			}
		
		},

		computed: {
			contentStyle: function(){
				let self = this;
				let padding = self.data.level * 10;
				return {
					paddingLeft: padding + 'px'
				}
			},

			signCls: function(){
				let self = this;
				if(self.data.childNodes.length > 0){
					return self.data.childOpen ? 'icofont-caret-down' : 'icofont-caret-right';
				}
				return 'icofont-none';

			}
		
		},

		methods: {
			toggleOpen: function(event, node){
				let self = this;
				self.$nextTick(() => self.data.childOpen = !node.childOpen);
				self.$bus.$emit('snapshot-clicked', {event: event, node: node});
				self.$bus.$emit('snapshot-event', {id: node.id, type: 'click'});

			},

			handleMouseEvt: function(event, node, type){
				let self = this;
				self.$bus.$emit('snapshot-event', {id: node.id, type: 'hover', value: type});

			},

			handleSnapshotEvt: function(id, type) {
				let self = this;
				if(id != self.data.id){
					return;
				}
				self.$nextTick(() => {
					self.selected = 0 == type;
					self.data.childOpen = 1 == type || (0 == type && self.data.childOpen);
					self.$bus.$emit('route-snapshot-parent', self.data.pid);
					if(self.selected){
						self.$bus.$emit('scroll-to-view', id);
					}
				});

			},

			handleScroll2View: function(id){
				let self = this;
				if(id != self.data.id){
					return;
				}
				self.$el.scrollIntoView({behavior: 'smooth', block: 'center', 'inline': 'center'});
			}

		},
		
		mounted: function(){
			let self = this;
			self.$bus.$on('snapshot-clicked', (evtMsg) => {
				let node = evtMsg.node;
				self.selected = node.id == self.data.id;

			});

			self.$bus.$on('node-child-change', (changes) => {});

			self.$bus.$on('route-snapshot-node', id => self.handleSnapshotEvt(id, 0));
			self.$bus.$on('route-snapshot-parent', id => self.handleSnapshotEvt(id, 1));
			//self.$bus.$on('scroll-to-view', id => self.handleScroll2View(id));

		},
		
		updated: function(){
			let self = this;
			
		
		}

	}
</script>
<style>
	/*@import '@asset/icofont.min.css';*/
	.sign{
		display: flex;
	    align-items: center;
	    font-size: 12px;
	    padding: 1px 0px;
	}
	.sign .content{
	    color: white;
	    text-transform: lowercase;
		line-height: initial;
	}
	.sign .content .icon{
		width: 10px;
	}
	.sign .content .tagname{
		padding: 0px 8px;
	}		
	.sign:hover{
	    background: #ffffff47;
	}
	.sign.selected{
	    background: #ffffffa8;
	}
	.children{
		/*padding-left: 8px;*/
	}
</style>